<template>
  <div class="student-details-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <el-button 
        icon="el-icon-back" 
        @click="handleBack"
        size="small"
        class="back-btn"
      >返回</el-button>
      <h2 style="display: inline-block; margin-left: 15px;">学生详情</h2>
    </div>

    <!-- 详情卡片 -->
    <el-card 
      class="details-card" 
      shadow="hover" 
      :body-style="{ padding: '24px' }"
      border-radius="6px"
    >
      <el-form label-width="120px" class="detail-form">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="学生ID">{{ studentInfo.id || '-' }}</el-form-item>
            <el-form-item label="姓名">{{ studentInfo.name || '-' }}</el-form-item>
            <el-form-item label="年龄">{{ studentInfo.age || '-' }}</el-form-item>
            <el-form-item label="性别">
              <el-tag 
                type="success" 
                v-if="studentInfo.gender === '女'"
              >女</el-tag>
              <el-tag 
                type="info" 
                v-else-if="studentInfo.gender === '男'"
              >男</el-tag>
              <span v-else>-</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="班级">{{ studentInfo.className || '-' }}</el-form-item>
            <el-form-item label="入学时间">{{ formatDate(studentInfo.enrollmentTime) }}</el-form-item>
            <el-form-item label="联系电话">{{ studentInfo.phone || '-' }}</el-form-item>
            <el-form-item label="邮箱">{{ studentInfo.email || '-' }}</el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="家庭地址">
          <div style="word-break: break-all;">{{ studentInfo.address || '-' }}</div>
        </el-form-item>
        <el-form-item label="状态">
          <el-tag 
            type="success" 
            v-if="studentInfo.status === '正常'"
          >正常</el-tag>
          <el-tag 
            type="warning" 
            v-else-if="studentInfo.status === '请假'"
          >请假</el-tag>
          <el-tag 
            type="danger" 
            v-else-if="studentInfo.status === '休学'"
          >休学</el-tag>
          <span v-else>-</span>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  name: 'StudentDetails',
  data() {
    return {
      studentInfo: {},
      // 补充完整ID=1~12的学生详情数据（与列表页对应）
      mockStudentDetails: [
        {
          id: 1,
          name: '张三',
          age: 18,
          gender: '男',
          className: '一班',
          enrollmentTime: '2023-09-01',
          phone: '13800138000',
          email: 'zhangsan@example.com',
          address: '北京市朝阳区某某街道100号',
          status: '正常'
        },
        {
          id: 2,
          name: '李四',
          age: 19,
          gender: '男',
          className: '一班',
          enrollmentTime: '2023-09-01',
          phone: '13900139000',
          email: 'lisi@example.com',
          address: '上海市浦东新区某某路200号',
          status: '正常'
        },
        {
          id: 3,
          name: '王五',
          age: 18,
          gender: '女',
          className: '二班',
          enrollmentTime: '2023-09-01',
          phone: '13700137000',
          email: 'wangwu@example.com',
          address: '广州市天河区某某巷300号',
          status: '请假'
        },
        {
          id: 4,
          name: '赵六',
          age: 20,
          gender: '男',
          className: '二班',
          enrollmentTime: '2022-09-01',
          phone: '13600136000',
          email: 'zhaoliu@example.com',
          address: '深圳市南山区某某大道400号',
          status: '休学'
        },
        // 新增：孙七（ID=5）及之后的学生详情
        {
          id: 5,
          name: '孙七',
          age: 19,
          gender: '女',
          className: '一班',
          enrollmentTime: '2023-09-01',
          phone: '13500135000',
          email: 'sunqi@example.com',
          address: '杭州市西湖区某某路500号',
          status: '正常'
        },
        {
          id: 6,
          name: '周八',
          age: 21,
          gender: '男',
          className: '三班',
          enrollmentTime: '2021-09-01',
          phone: '13400134000',
          email: 'zhouba@example.com',
          address: '南京市玄武区某某街600号',
          status: '正常'
        },
        {
          id: 7,
          name: '吴九',
          age: 18,
          gender: '女',
          className: '三班',
          enrollmentTime: '2023-09-01',
          phone: '13300133000',
          email: 'wujiu@example.com',
          address: '成都市锦江区某某巷700号',
          status: '正常'
        },
        {
          id: 8,
          name: '郑十',
          age: 19,
          gender: '男',
          className: '二班',
          enrollmentTime: '2023-09-01',
          phone: '13200132000',
          email: 'zhengshi@example.com',
          address: '武汉市武昌区某某大道800号',
          status: '正常'
        },
        {
          id: 9,
          name: '钱十一',
          age: 20,
          gender: '女',
          className: '一班',
          enrollmentTime: '2022-09-01',
          phone: '13100131000',
          email: 'qianshiyi@example.com',
          address: '重庆市渝中区某某路900号',
          status: '请假'
        },
        {
          id: 10,
          name: '冯十二',
          age: 21,
          gender: '男',
          className: '三班',
          enrollmentTime: '2021-09-01',
          phone: '13000130000',
          email: 'fengshier@example.com',
          address: '西安市雁塔区某某街1000号',
          status: '正常'
        },
        {
          id: 11,
          name: '陈十三',
          age: 18,
          gender: '女',
          className: '二班',
          enrollmentTime: '2023-09-01',
          phone: '12900129000',
          email: 'chenshisan@example.com',
          address: '长沙市岳麓区某某巷1100号',
          status: '正常'
        },
        {
          id: 12,
          name: '褚十四',
          age: 19,
          gender: '男',
          className: '一班',
          enrollmentTime: '2023-09-01',
          phone: '12800128000',
          email: 'chushisi@example.com',
          address: '郑州市金水区某某大道1200号',
          status: '休学'
        }
      ]
    };
  },
  created() {
    const id = this.$route.query.id;
    if (id) {
      this.getMockStudentDetails(Number(id));
    } else {
      this.$message.error('未获取到学生ID');
      this.handleBack();
    }
  },
  methods: {
    getMockStudentDetails(id) {
      setTimeout(() => {
        const student = this.mockStudentDetails.find(item => item.id === id);
        if (student) {
          this.studentInfo = student;
        } else {
          this.$message.error('未找到对应学生的详情数据');
          this.handleBack();
        }
      }, 500);
    },
    formatDate(date) {
      if (!date) return '-';
      return moment(date).format('YYYY-MM-DD');
    },
    handleBack() {
      this.$router.push('/student/list');
    }
  }
};
</script>

<style scoped>
.student-details-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}

.back-btn {
  transition: all 0.3s ease;
}

.back-btn:hover {
  color: #409eff;
  transform: translateX(-2px);
}

.details-card {
  margin-top: 10px;
}

.detail-form .el-form-item {
  margin-bottom: 16px;
}
</style>
    